<template>
    <div class="c-info c-first">
        <c-content title="小学组" :video="video1"></c-content>
        <c-content title="初中组" :video="video2"></c-content>
        <c-content title="高中组" :video="video3"></c-content>
        <c-content title="大学组" :video="video4"></c-content>
    </div>
</template>

<script>
    import { cTitle } from '../../../components/main';
    import { cContent } from '../../../components/main';
    export default {
        name:'dynamic',

        data() {
          return {
              video1:[],
              video2:[],
              video3:[],
              video4:[]
          }
        },

        components:{
            cContent
        },

        mounted() {
            [1,2,3,4].forEach(type => {
                this.axios.get('article',{params:{type}})
                    .then(data => {
                        data = data.data;
                        this[`video${type}`] = data;
                    })
            })
        }
    }
</script>

<style lang="less" scoped rel="stylesheet/less" type="text/css">
    @import "../../../plugins/assets/css/flex.less";
    .dy-first{
        .flex-between;
        &-left {
            width: 40%;
            img {
                width: 100%;
            }
        }
        &-right {
            width: 55%;
            line-height:26px;
            .first-right-item {
                margin-bottom:30px;
            }
            .item-title {
                font-weight:bold;
                font-size:24px;
                margin-bottom:10px;
            }
            .item-text {
                color: #666666;
            }
        }
    }
    .dy-second-content{
        margin:50px 0;
        .flex-between;
        .dy-content-item {
            .box-sizing;
            width: 23%;
            padding: 5px;
            background: #fff;
            font-size:12px;
            > div {
                margin-bottom: 10px;
                span {
                    margin-right: 10px;
                }
            }
            > :nth-child(2), > :nth-child(3) {
                font-weight:bold;
            }
        }
    }
    .c-first{
        width: 50%;
        margin: 50px auto;
    }
    @media screen and (max-width: 768px) {
        .dy-first{
            .flex-between;
            &-left {
                width: 40%;
                display: none;
                img {
                    width: 100%;
                }
            }
            &-right {
                width: 100%;
                line-height:18px;
                .first-right-item {
                    margin-bottom:30px;
                }
                .item-title {
                    font-weight:bold;
                    font-size:3vw;
                    margin-bottom:10px;
                }
                .item-text {
                    color: #666666;
                    font-size: 2vw;
                }
            }
        }
        .dy-second-content{
            margin:50px 0;
            .flex-between;
            .dy-content-item {
                .box-sizing;
                width: 23%;
                padding: 5px;
                background: #fff;
                font-size:12px;
                > div {
                    margin-bottom: 5px;
                    span {
                        margin-right: 3px;
                    }
                }
                > :nth-child(2), > :nth-child(3) {
                    font-weight:bold;
                }
            }
        }
        .c-first{
            width: 90%;
            margin: 50px auto;
        }
    }
</style>